<!-- 金融服务模块 -->
<template>
	<view class="financial-services-container">
		<view class="financial-services-title">邮惠金融</view>
		<view class="financial-services-list">
			<view class="financial-services-item" v-for="item in financialServicesList" :key="item.img" @click="toUrl(item.url)">
				<image :src="item.img"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const financialServicesList = ref([
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/02b3a971-c9f0-43b5-ada8-ac626dbe3fc9.png', name: '代发工资', url: 'https://jlyxlite.jdyd.xyz/activity/payroll_processing.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/de1bcfb5-c939-425c-9a0a-597447cb1e7a.png', name: '商户收单', url: 'https://jlyxlite.jdyd.xyz/activity/merchant_receipt.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5e25acbd-f5ac-42c6-92eb-b7ed602775b7.png', name: '缴费平台', url: 'https://jlyxlite.jdyd.xyz/activity/payment_platform.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/bad88f79-b513-4541-9906-40f81a72ebb6.png', name: '借记卡', url: 'https://jlyxlite.jdyd.xyz/activity/debit_card.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/53249055-eecf-42a9-91c7-3079f5973c8c.png', name: '邮你贷', url: 'https://jlyxlite.jdyd.xyz/activity/postal_loan.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/bc294797-8207-429a-847a-203ac40bb14a.png', name: '信用卡', url: 'https://jlyxlite.jdyd.xyz/activity/credit_card.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a44ce2ef-eff7-4025-9d21-96f25b7cdea7.png', name: '投资理财', url: 'https://jlyxlite.jdyd.xyz/activity/investment_wealth.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/65810ec2-1ea1-421e-a055-578547a62a28.png', name: '电子银行', url: 'https://jlyxlite.jdyd.xyz/activity/e_banking.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/c7c065c1-5212-4020-b05b-2d74a5088f6c.png', name: '邮储业务', url: 'https://jlyxlite.jdyd.xyz/activity/postal_savings.html' },
		{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/4cfc1b50-e471-40ba-9e18-de47527eb8cd.png', name: '更多服务', url: '' },
	])
	
	function toUrl(url){
		if(!url){
			$infoBox.toast('敬请期待！')
			return
		}
		uni.navigateTo({
			url: `/pages/common/webview/index?url=${encodeURIComponent(url)}`
		})
	}
	
</script>

<style lang="less" scoped>
	.financial-services-container{
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 24rpx;
		padding: 44rpx 32rpx;
		.financial-services-title{
			font-weight: bold;
			font-size: 34rpx;
			margin-bottom: 44rpx;
		}
		.financial-services-list{
			display: flex;
			flex-wrap: wrap;
			row-gap: 40rpx;
			.financial-services-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;
				gap: 20rpx;
				image{
					width: 52rpx;
					height: 52rpx;
				}
				text{
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>